<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排行榜</title>
<style>
.mod_bg{
	    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;
    background: url(../images/背景1.jpg) 50% 0 repeat-x;
}
.section_inner{
	    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    max-width: 1200px;
    position: relative;
    margin: 0 50px;
    min-width: 900px;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 4%;
}
.index__hd{
	    color: #000;
    font-size: 20px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    position: relative;
    padding-top: 4.16667%;
    padding-bottom: 2%;
    text-align:center;
}
.index_more{
	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #000;
    cursor: pointer;
    text-decoration: none;
    position: absolute;
    right: 0;
    top: 80px;
}
.toplist__list{
	    color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 0;
    margin-right: -20px;
}
.index_txt{
text-align:center;
font-size: 40px;
}
.toplist__item {
    display: inline-block;
    z-index: 2;
    width: 20%;
}
.item0{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;   
}

.mod_cover {
    zoom: 1;
}
.toplist__box{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 0;
    list-style: none;
    position: relative;
    margin-right: 20px;
    height: 500px;
    overflow: hidden;
}
.toplist_bg{
        color: #000;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 567px;
    background-image: url(../images/toplist_bg.jpg);
    transform: scale(1);
    transition: transform .75s;
}
.bg2{
    background-position: -224px 0;
}
.bg3{
    background-position: -448px 0;
}
.bg4{    
    background-position: -672px 0;
}
.mod_cover__icon_play{

}
</style>
</head>
<body>
<div class="mod_bg">
	<div class="section_inner">
		<div class="index__hd">
			<h2 class="index__txt">排行榜</h2>
		</div>
		<a href="#" class="index_more">更多</a>
		<ul class="toplist__list">
            <li class="toplist__item item0 mod_cover">
                <div class="toplist__box">
                    <div class="toplist_bg ">
                        <i class="mod_cover__icon_play"></i>
                    </div>
                </div>
            </li>
            <li class="toplist__item item1 mod_cover">
                <div class="toplist__box">
                    <div class="toplist_bg"></div>                    
                </div>
            </li>
            <li class="toplist__item item2 mod_cover">
                <div class="toplist__box">
                    <div class="toplist_bg bg2"></div>                    
                </div>
            </li>
            <li class="toplist__item item3 mod_cover">
                <div class="toplist__box">
                    <div class="toplist_bg bg3"></div>                    
                </div>
            </li>
            <li class="toplist__item item4 mod_cover">
                <div class="toplist__box">
                    <div class="toplist_bg bg4"></div>                    
                </div>
            </li>
        </ul>
	</div>
</div>	
</body>
</html>